<template>
  <div class="login-page-wrapper">
    <div class="login-area">
      <img src="../../assets/logo.png" alt="logo" class="login-logo">
      <p class="login-info">每一位老师，都是精心雕琢知识的匠人</p>
      <input id="userAccount" v-model="loginAccount" type="text" placeholder="账号">
      <input id="userPassword" v-model="password" type="password" placeholder="密码">
      <div class="verify-wrapper">
        <input id="verifyCode" type="text" v-model="verifyCode" placeholder="验证码" maxlength="6" >
        <img v-bind:src="src" width="180" height="45" v-on:click="fetchVerifyCode" id="yzmimg">
      </div>

      <button class="btn btn-primary login-btn" v-on:click="login">登入</button>
      <div class="login_error"><span>{{ errorTip }}</span></div>

    </div>
  </div>
</template>
<style lang="less">

html{
  height:100%;
}
body{
  height:100%;
}
.login-page-wrapper{
  overflow: hidden;
  height:100%;
  background-color: #eeeeee;
  background-repeat: repeat;
}
.login-logo{
  max-width:100%;
}

.login-area{
  width:366px;
  margin:100px auto 56px;
}
.login-info{
  margin-top:24px;
  text-align: center;
  font-size: 14px;
  color: #222222;
  opacity: 0.3;
}
#userAccount{
  font-size: 20px;
  width:366px;
  height:50px;
  margin-top:40px;
  border:none;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  text-indent:16px;
  outline:none;
}
#userPassword{
  font-size: 20px;
  width:366px;
  height:50px;
  border:none;
  margin-top: 1px;
  text-indent:16px;
  outline:none;
}
#verifyCode{
  float: left;
  font-size: 20px;
  width:180px;
  height:50px;
  border:none;
  -webkit-border-radius:8px;
  -moz-border-radius:8px;
  border-radius:8px;
  text-indent:16px;
  outline:none;
}
#yzmimg{
  float: left;
  width: 150px;
  height: 40px;
  margin-top: 5px;
  margin-left: 15px;
}
.verify-wrapper{
  margin-top: 1px;
  background-color: white;
  border-bottom-right-radius: 8px;
  border-bottom-left-radius: 8px;
  overflow: hidden;
}
.login-btn{
  font-size: 20px!important;
  border-radius: 8px!important;
  outline: none!important;
  width:366px!important;
  height:50px!important;
  background-color: #4fc4ff!important;
  margin-top:16px;
  border: none!important;
  cursor: pointer;
  color: #fff;
  &:hover{
    background:linear-gradient(to bottom, #66daff 0, #4fc4ff 100%)!important;
  }
  &:active{
    border: none!important;
    background: #34a8ff!important;
  }
}
  .login_error {
    padding: 10px 0 0 5px;
    font-size: 12px;
    color: red;
  }

</style>

<script>
  // import DefaultButton from '../common/DefaultButton.vue'
  export default {
    name: 'login',
    data () {
      return {
        loginAccount: '',
        password: '',
        verifyCode: '',
        errorTip: '',
        src: 'restapi/smartfactory/user/auth/verifycode/' + (new Date().getTime()) + '.jpg' + '?version=' + Math.random()
      }
    },

    methods: {
      login: function () {
        let loginAccount = this.loginAccount
        let loginPassword = this.password
        let verifyCode = this.verifyCode
        this.$store.dispatch('LOGIN', { loginAccount, loginPassword, verifyCode })
          .then(response => {
            this.errorTip = ''
            switch (window.localStorage.user_roles) {
              case 'ROLE_OPERATOR_BASEINFO_INPUT':
                this.$router.push({
                  path: 'main/userManagement'
                })
                break
              case 'ROLE_OPERATOR_CONTENT_MGT':
                this.$router.push({
                  path: 'main/userManagement'
                })
                break
              case 'ROLE_OPERATOR_AYALIZE_MGT':
                this.$router.push({
                  path: 'main/userManagement'
                })
                break
              case 'ROLE_PT_EDITOR':
                this.$router.push({
                  path: 'main/userManagement'
                })
                break
              case 'ROLE_PT_TEACHER':
                this.$router.push({
                  path: 'main/userManagement'
                })
                break
              case 'ROLE_WINSHARE_PT_TEACHER':
                this.$router.push({
                  path: 'main/userManagement'
                })
                break
              default:
                this.$router.push({
                  path: 'main/userManagement'
                })
                break
            }
          }, response => {
            console.log(response)
            this.errorTip = response.body.message
          })
      },

      fetchVerifyCode: function () {
        this.src = 'restapi/smartfactory/user/auth/verifycode/' + (new Date().getTime()) + '.jpg' + '?version=' + Math.random()
      }
    },
    components: {

    },
    mounted () {

    }
  }

</script>

